<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        #head{
            background-color: black;
            height: 40px;
            color: white;
          text-align: center;
            line-height: 40px;
            font-size: 12px;
            padding-left: 92px;
            position: sticky;
            top: 0;
        }


        #search,#lb{
            width: 1226px;
            height: 100px;

            background-color: lightskyblue;
            margin-bottom: 10px;
        }
        #search,#lb{
            margin: 0 auto;
        }
        #search{
            width:1226px;
            height: 100px;
             background-color: skyblue;
            margin-bottom: 5px;
            margin-top: 5px;
            position: sticky;

        }
      #lb{
             width: 1226px;
           height:460px;
           background-color: skyblue;
          margin-bottom: 10px;
          position: relative;
        }

    .div1{
        background-color: skyblue;
        width:234px ;
        height: 167px;
        float:left;
        margin-left:145px;
        margin-right: 10px;

    }
    .div-list{
        width: 316px;
        height: 167px;
        background-color:hotpink;
        float: left;
        margin-bottom: 10px;
    }
  a{
       color: white;
      text-decoration: none;
  }
  #left-btn,#right-btn{
    width: 40px;
      height: 70px;
      /*border: 1px solid red;*/

  }
  #left-btn{
      position: absolute;
    left: 250px;
      top: 220px;
      background-position: -84px;
      background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
  }
 #right-btn{
     position: absolute;
     right: 0px;
     top: 220px;
     background-position: -125px;
     background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
 }
   #left-btn:hover{
       background-position: -167px;
   }
   #right-btn:hover{
       background-position: -43px;
   }
 .tool{
     width: 84px;
     height: 454px;
     /*border: 1px solid red;*/
     position: fixed;
     right: 0px;
     bottom: 100px;
     background-color: #fff;
 }
 .tool>div{
     width: 84px;
     height: 90px;
     border-bottom: 1px solid #f5f5f5;
     text-align: center;
     line-height: 90px;
     color: #757575;
 }
 .tool>div:hover{
     color: #ff6700;
 }
 img{
     width: 1226px;
     height:460px;

 }
 .phone{
        float: left;
     margin-left:800px;
     margin-right: 100px;
     border: 1px solid red;
 }
 .phone>div{
     background-color: #ff6700;
     border: 1px solid red;
     width:234px;
     height:614px;

 }
 .phone>li{

 }
    </style>


</head>
<body>

<div id="head">
    <tr>
        <td><a href="https://www.baidu.com">首页 </a></td>
        <td>登录</td>
        <td>官网</td>
    </tr>

</div>
<div id="search">
    search

</div>
<div id="lb">
     <img src="40fd255deee6afe3af8f1eb7f4e6fc39.jpg">
    <div id="left-btn"></div>
    <div id="right-btn"></div>

</div>

<div>
    <div class="div1">1</div>
    <div class="div-list" style="margin-left:18px ">2</div>
    <div class="div-list" style="margin-left: 15px;margin-right: 15px ">3</div>
    <div class="div-list">4</div>
</div>
<div class="tool">
    <div>手机APP</div>
    <div>个人中心</div>
    <div>售后客服</div>
    <div>人工客服</div>
    <div>购物车</div>
</div>

<div class="phone">

     <div>
           这是一个大手机
     </div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>



</body>
</html>